<template>
  <footer class="py-5">
    <el-container>
      <el-main>
        <el-row :gutter="20">
          <el-col :lg="6" :md="8" :sm="12">
            <div class="footer-menu">
              <img src="../images/logo.svg" width="240" height="70" alt="logo">
              <div class="social-links">
                <el-row :gutter="9" class="mt-3">
                  <el-col :span="4">
                    <el-button type="text" class="btn btn-outline-light">
                      <img src="../images/facebook.svg" alt="user">
                    </el-button>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="text" class="btn btn-outline-light">
                      <img src="../images/twitter.svg" alt="twitter">
                    </el-button>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="text" class="btn btn-outline-light">
                      <img src="../images/youtube.svg" alt="youtube">
                    </el-button>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="text" class="btn btn-outline-light">
                      <img src="../images/camera.svg" alt="camera">
                    </el-button>
                  </el-col>
                  <el-col :span="4">
                    <el-button type="text" class="btn btn-outline-light">
                      <img src="../images/amazon.svg" alt="amazon">
                    </el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>

          <el-col :md="6" :sm="12" class="col-lg-2">
            <div class="footer-menu footer-menu-2">
              <h5 class="widget-title">有机</h5>
              <el-menu default-active="1" class="menu-list" mode="vertical">
                <el-menu-item index="1" class="menu-item">
                  <router-link to="#" class="nav-link">关于我们</router-link>
                </el-menu-item>
                <el-menu-item index="2" class="menu-item">
                  <router-link to="#" class="nav-link">条件</router-link>
                </el-menu-item>
                <el-menu-item index="3" class="menu-item">
                  <router-link to="#" class="nav-link">我们的期刊</router-link>
                </el-menu-item>
                <el-menu-item index="4" class="menu-item">
                  <router-link to="#" class="nav-link">职业</router-link>
                </el-menu-item>
                <el-menu-item index="5" class="menu-item">
                  <router-link to="#" class="nav-link">联盟计划</router-link>
                </el-menu-item>
                <el-menu-item index="6" class="menu-item">
                  <router-link to="#" class="nav-link">超压</router-link>
                </el-menu-item>
              </el-menu>
            </div>
          </el-col>

          <el-col :md="6" :sm="12" class="col-lg-2">
            <div class="footer-menu footer-menu-2">
              <h5 class="widget-title">快速链接</h5>
              <el-menu default-active="1" class="menu-list" mode="vertical">
                <el-menu-item index="1" class="menu-item">
                  <router-link to="#" class="nav-link">优惠</router-link>
                </el-menu-item>
                <el-menu-item index="2" class="menu-item">
                  <router-link to="#" class="nav-link">折扣劵</router-link>
                </el-menu-item>
                <el-menu-item index="3" class="menu-item">
                  <router-link to="#" class="nav-link">商店</router-link>
                </el-menu-item>
                <el-menu-item index="4" class="menu-item">
                  <router-link to="#" class="nav-link">跟踪订单</router-link>
                </el-menu-item>
                <el-menu-item index="5" class="menu-item">
                  <router-link to="#" class="nav-link">商店</router-link>
                </el-menu-item>
                <el-menu-item index="6" class="menu-item">
                  <router-link to="#" class="nav-link">信息</router-link>
                </el-menu-item>
              </el-menu>
            </div>
          </el-col>

          <el-col :md="6" :sm="12" class="col-lg-2">
            <div class="footer-menu footer-menu-2">
              <h5 class="widget-title">客户服务</h5>
              <el-menu default-active="1" class="menu-list" mode="vertical">
                <el-menu-item index="1" class="menu-item">
                  <router-link to="#" class="nav-link">常见问题</router-link>
                </el-menu-item>
                <el-menu-item index="2" class="menu-item">
                  <router-link to="#" class="nav-link">联系</router-link>
                </el-menu-item>
                <el-menu-item index="3" class="menu-item">
                  <router-link to="#" class="nav-link">隐私政策</router-link>
                </el-menu-item>
                <el-menu-item index="4" class="menu-item">
                  <router-link to="#" class="nav-link">退货与退款</router-link>
                </el-menu-item>
                <el-menu-item index="5" class="menu-item">
                  <router-link to="#" class="nav-link">Cookie指南</router-link>
                </el-menu-item>
                <el-menu-item index="6" class="menu-item">
                  <router-link to="#" class="nav-link">配送信息</router-link>
                </el-menu-item>
              </el-menu>
            </div>
          </el-col>

          <el-col :lg="6" :md="8" :sm="12">
            <div class="footer-menu">
              <h5 class="widget-title">订阅我们</h5>
              <p>订阅我们的时事通讯，以获取有关我们盛大优惠的最新信息</p>
              <el-form :model="subscribeForm" class="d-flex mt-3 gap-0">
                <el-form-item prop="email" class="flex-grow-1">
                  <el-input v-model="subscribeForm.email" placeholder="电子邮件地址" class="rounded-start rounded-0 bg-light"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" class="rounded-end">订阅</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <div class="footer-bottom">
           <el-row :gutter="20">
            <el-col :md="12" :sm="24" class="copyright">
              <p>© 2024 Organic. All rights reserved.</p>
            </el-col>
          </el-row>
          </div>
        </el-row>
      </el-main>
    </el-container>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      subscribeForm: {
        email: ''
      }
    };
  }
};
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}

.py-5{
  width: 92%;
  margin: 0 auto;
  margin-top: 30px;
}

.mt-3{
  width: 75%;
  /* border: 5px solid red; */
}

.btn{
  width: 41px; /* 设置按钮宽度为32px */
  height: 37px; /* 设置按钮高度为32px */
  padding: 0; /* 移除默认内边距 */
  border: 1px solid #ccc; /* 添加边框 */
  border-radius: 4px; /* 可选：添加圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.btn:hover{
  border-color: #ccc; /* 鼠标悬浮时边框颜色 */
  background-color: #cccccc; /* 鼠标悬浮时背景颜色 */
}

.social-links{
  margin-top: 15px;
}

.nav-link{
  text-decoration: none; /* 去除下划线 */
  color: #999; 
  padding: 6px;
  margin-left: -20px;
  margin-top: -200px;
}


.footer-menu-2{
  width: 75%;
  
}

.widget-title{
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 10px;
}

.menu-item{
  height: 40px;
  line-height: 36px;
}

.col-lg-2{
  width: 15%;
}

.footer-menu p{
  color: #999;
  margin-bottom: 20px;
}

.el-form.d-flex {
  display: flex;
  align-items: center;
}

.flex-grow-1 {
  flex-grow: 1;
}

.rounded-end {
  width: 85px;
  height: 40px;
  background-color: #212529;
  border-color: black;
  font-weight: 700;
}

.rounded-end:hover {
  background-color: darkgray;
  border-color: darkgray;
}

.footer-bottom{
  width: 34%;
  margin-top: 30px;
  text-align: center;
  margin-left: 700px;
}

</style>